<template>
	<view class="container">
		<view class="item flex-row">
			<text class="label">头像</text>
			<view class="flex-row">
				<xbc-avatar :src="user.avatar" size="36px" />
			</view>
		</view>
		<view class="item flex-row">
			<text class="label">昵称</text>
			<view class="input">{{ user.name }}</view>
		</view>
		<view @tap="setLang" class="item flex-row">
			<text class="label">翻译</text>
			<view class="input flex-row">
				<text>设置</text>
				<text class="iconfont icon-arrow-right"></text>
			</view>
		</view>
		<view @tap="logout" class="btn flex-column">退出登录</view>
	</view>
</template>

<script>
import XBCIM from 'xbcim'
export default{
	data(){
		return {
			user: {}
		}
	},
	onShow(){
		this.getProfile()
	},
	methods: {
		logout(){
			uni.showModal({
				title: '提示',
				content: '是否确认退出登录',
				success: res=>{
					if(res.cancel) return
					XBCIM.destroy()
					uni.removeStorageSync('userId')
					uni.navigateTo({
						url: '/'
					})
				}
			})
		},
		setLang(){
			uni.navigateTo({
				url: '/pages/mine/lang'
			})
		},
		async getProfile(){
			this.user = await XBCIM.getUserProfile()
		}
	}
}
</script>

<style lang="scss" scoped>

.btn {
	color: red;
	height: 80rpx;
	margin: 40rpx;
	font-size: 32rpx;
}

.item {
	height: 120rpx;
	padding: 0 30rpx;
	border-bottom: 2rpx solid #f5f5f5;

	.label,
	.input {
		color: #333;
		font-size: 30rpx;
	}

	.input {
		text-align: right;
	}
	
	.iconfont{
		color: #999;
		margin-left: 10rpx;
	}
}
</style>